import { Component } from "react";
import { Tabs } from "antd-mobile";
import { SearchMovieList } from "../../apis/movie"
export default class Hot extends Component {
    state = {
        hotlist: [],
        cotlist: [],
    }
    render() {
        return (
            <>
                <Tabs>
                    <Tabs.Tab title='热映' key='fruits'>

                        <div style={{ marginBottom: 20}}>
                            {this.state.hotlist.map((item,index) =>
                                <div key={item.id} style={{ display: "flex",marginBottom:5,boxShadow:"0 0 3px 1px #ccc", borderRadius:'8px' }}>
                                    <img src={item.image} style={{ width: 100, height: 150,borderRadius:'8px', boxShadow:'1px 0 3px 1px rgb(133, 133, 133)' }} alt=""></img>
                                    <div style={{marginLeft:20}}>
                                        <h3>电影名称：{item.name}</h3>
                                        <div>电影作者：{item.director}</div>
                                        <div>电影演员：{item.actors}</div>
                                        <div>电影评分：{item.point}</div>
                                        <div>电影类型：{item.type}</div>
                                        <div>放映时长：{item.time}分钟</div>
                                    </div>
                                </div>
                            )}
                        </div>
                    </Tabs.Tab>
                    <Tabs.Tab title='待映' key='vegetables'>
                        西红柿
                    </Tabs.Tab>
                </Tabs>
            </>
        )
    }
    async componentDidMount() {
        // 热映的
        let res1 = await SearchMovieList({
            state: 1
        })
        // console.log(res1)
        // 待映的
        let res2 = await SearchMovieList({
            state: 2
        })
        this.setState({
            hotlist: res1.data.data,
            cotlist: res2.data.data
        })
    }
}